<template>
  <Layout style="padding:10px;background:#fff;">
    <Row>
      <Col span="6">
      <Card dis-hover :bordered="false" title="企业基本信息" icon="ios-options" :padding="0">
        <span slot="extra">
          <Button size="small" @click="handleEdit" v-if="!isEdit">编辑</Button>
          <Button size="small" type="primary" v-if="isEdit" @click="handleSave">保存</Button>
        </span>
        <transition name="fade-transverse">
          <CellGroup v-if="!isEdit">
            <Cell title="企业名称：" :extra="row.name" />
            <Cell title="企业别名：" :extra="row.alias" />
            <Cell title="所属城市" :extra="row.cityName" />
            <Cell title="变压器配电结构：" :extra="filterIsTranform(row.transformerStructure)" />
            <Cell title="所属行业：" :extra="row.business" />
            <Cell title="地址：" :extra="row.address" />
            <Cell title="联系人：" :extra="row.contactName" />
            <Cell title="联系电话：" :extra="row.contactPhone" />
            <Cell title="主变台数：" :extra="row.mainCapacity+'台'" v-if="companyType===1" />
            <Cell title="主变容量：" :extra="row.mainTotal+'KVA'" v-if="companyType===1" />
            <Cell title="系统功能：" :extra="row.sysFuncText" />
            <Cell title="其他功能：" v-if="row.sysFunc===1">
              <span slot="extra" v-html="buildFunction([row.thermalImager,row.humitureState])" />
            </Cell>
          </CellGroup>
        </transition>
        <transition name="fade-transverse">
          <div v-if="isEdit" style="padding-top:5px;">
            <companyForm :isEdit="true" @btnDisable="toggleBtnDisable" @save="finishSave" :row="row" ref="companyFormRef" />
          </div>
        </transition>
      </Card>
      </Col>
    </Row>
  </Layout>
</template>
<script>
import { getSingleCompanyInformation } from '@/api'
import companyForm from './companyForm'
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  components: {
    companyForm
  },
  created() {
    this.companyId = this.id
  },
  mounted() {
    this.companyId = this.id
    this.getSingleCompanyInformation()
  },
  data() {
    return {
      companyId: '',
      isEdit: false,
      btnDisable: false,
      row: {},
      companyType: 1 // companyType == 1 为配电结构企业 compnanyType === 2为 非配电结构企业
    }
  },
  methods: {
    filterIsTranform(bool) {
      if (bool) return '是'
      return '否'
    },
    getSingleCompanyInformation() {
      getSingleCompanyInformation(this.companyId).then(res => {
        if (res.code === 200) {
          this.row = res.data
          const { transformerStructure } = res.data
          if (transformerStructure) {
            this.companyType = 1
          } else {
            this.companyType = 2
          }
        }
      })
    },
    // filterExtra(item) {
    //   const baseInfor = this.row;
    //   if (item.key === "transformerStructure") {
    //     return this.row[item.key] ? "是" : "否";
    //   } else if (item.key === "thermalImager,humitureState") {
    //     return this.buildFunction([
    //       this.row["thermalImager"],
    //       row["humitureState"]
    //     ]);
    //   } else {
    //     return this.row[item.key];
    //   }
    // },
    buildFunction(arr) {
      let html = ''
      if (arr[0] && arr[1] == false) {
        html += `热成像`
      } else if (arr[1] && arr[0] == false) {
        html += `温湿度`
      } else if (arr[0] && arr[1]) {
        html += `热成像 | 温湿度`
      }
      return `${html}`
    },

    handleEdit() {
      this.isEdit = true
    },

    handleSave() {
      this.$refs.companyFormRef.submit()
    },
    toggleBtnDisable() {
      this.btnDisable = true
    },
    finishSave() {
      this.btnDisable = false
      this.isEdit = false
      this.getSingleCompanyInformation()
    }
  }
}
</script>
